<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="file/css/index.css" />
	</head>
	<body>
		
		<div class="superbox">
			
			<div class="fix-on-off">+</div>
			
			<div class="menus">
				<h2>VIEWS</h2>
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
				</ul>
			</div>
			
			
			<div class="viewbox">
				<div class="opt">
					<div class="get">GET</div>
					<input class="getqs" value="10" type="number" />
				</div>
				<div id="viewbox"></div>
			</div>
			
			
		</div>
		
		
	</body>
	
	<script type="text/javascript" src="file/js/jquery-1.12.3.js" ></script>
	<script type="text/javascript" src="file/js/echarts.min.js" ></script>
	
	<script>
		$(function(){
			
			
			function closeMenu(){
				$(".menus").css("left","-300px");
				$(".fix-on-off").css("transform","rotate(0)");
			}
			
			function openMenu(){
				$(".menus").css("left","0");
				$(".fix-on-off").css("transform","rotate(225deg)");
			}
			
			
			$(".fix-on-off").on("click",function(){
				if ($(this).hasClass("open")) {
					closeMenu();
					$(this).removeClass("open");
				} else {
					openMenu();
					$(this).addClass("open");
				}
			});
			
			
		});
	</script>
	
	<script>
		
		var myChart = echarts.init(document.getElementById('viewbox'));
		var option = {
            tooltip: {},
            xAxis: {
                data: []
            },
            yAxis: {},
            series: {
                type: 'bar',
                data: []
            }
        };
		
//		get001();
		function get001(){
			
			var qs = $(".getqs").val();
			
			$.ajax({
				type:"get",
				url:"/Servlet01/servlet/S1?type=getLately&qs=" + qs,
				async:true,
				dateType:"json",
				success: function(msg) {
					option.xAxis.data = msg.x;
					option.series.data = msg.y;
					myChart.setOption(option);
				}
			});
		}
		
		$(".get").on("click",function(){
			get001();
		});
		
		$(".getqs").on("input",function(){
			get001();
		});
		
	</script>
	
	
</html>


